<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="wrap">
      <div class="title">学生系统</div>
      <div id="form">
        <p>姓名<input id="username" type="text" value="张三123" /></p>
        <p>年龄<input id="age" type="text" value="21" /></p>
        <p>
          性别
          <select id="gender">
            <option>男</option>
            <option>女</option>
            <option>你猜</option>
          </select>
        </p>
        <p>
          <input type="button" value="添加" id="addBtn" />
          <input type="button" value="排序" id="sortBtn" />
        </p>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <script>
      let btn = document.querySelector("#addBtn");
      let sort = document.querySelector("#sortBtn");

      let tbody = document.querySelector("tbody");

      let xhr1 = new XMLHttpRequest();
      xhr1.open("get", "/backdata");
      xhr1.send();
      xhr1.onload = function () {
        josnFile(xhr1.responseText);
      };
      btn.onclick = function () {
        let username = document.querySelector("#username").value;
        let age = document.querySelector("#age").value;
        let gender = document.querySelector("#gender").value;
        let xhr = new XMLHttpRequest();
        xhr.open("post", "/formdata");
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              console.log(xhr.responseText);
            }
          }
        };
        xhr.setRequestHeader("Content-Type", "application/json");

        let data = JSON.stringify({
          username,
          age,
          gender,
        });
        xhr.send(data);

        let xhr1 = new XMLHttpRequest();
        xhr1.open("get", "/backdata");
        xhr1.send();
        xhr1.onload = function () {
          josnFile(xhr1.responseText);
        };
      };
      sort.onclick = function () {
        let xhr = new XMLHttpRequest();
        xhr.open("get", "/sortdata");
        xhr.send();
        xhr.onload = function () {
          josnFile(xhr.responseText);
        };
      };

      function josnFile(data) {
        let obj = JSON.parse(data);
        tbody.innerHTML = "";
        obj.forEach((item) => {
          let trEle = document.createElement("tr");
          trEle.innerHTML = `<td>${item.username}</td><td>${item.age}</td><td>${item.gender}</td><td class="del">删除</td>`;
          tbody.appendChild(trEle);
          let dels = document.querySelectorAll(".del");
          [...dels].forEach((item) => {
            item.onclick = function (e) {
              let name = e.target.parentElement.firstChild.innerHTML;
              let xhr = new XMLHttpRequest();
              xhr.open("get", `/deldata?name=${name}`);
              xhr.send();
              xhr.onload = async function () {
                await josnFile(xhr.responseText);
              };
            };
          });
        });
      }
    </script>
  </body>
</html>
